<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script>
      window.onload = function () {
        const myChart = echarts.init(document.getElementById('main'))

        // =====准备数据=====
        const pieDatas = [
          {
            value: 100,
            name: '广州占比',
            percentage: '5%',
            color: '#34D160'
          },
          {
            value: 200,
            name: '深圳占比',
            percentage: '4%',
            color: '#027FF2'
          },
          {
            value: 300,
            name: '东莞占比',
            percentage: '8%',
            color: '#8A00E1'
          },
          {
            value: 400,
            name: '佛山占比',
            percentage: '10%',
            color: '#F19610'
          },
          {
            value: 500,
            name: '中山占比',
            percentage: '20%',
            color: '#6054FF'
          },
          {
            value: 600,
            name: '珠海占比',
            percentage: '40%',
            color: '#00C6FF'
          }
        ]

        // 将 pieDatas 格式的 数据映射为 系列图所需要的数据格式
        const data = pieDatas.map(item => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: item.color
          }
        }))

        // 求出总数
        const total = pieDatas.reduce((accumulate, currentValue) => {
          return accumulate + currentValue.value * 1
        }, 0)
        // =====准备数据=====

        // 2.指定图表的配置项和数据
        const option = {
          backgroundColor: 'rgb(40,46,72)',
          // 标题组件
          title: {
            text: `充电桩总数`,
            top: '50%',
            left: '50%',
            padding: [-20, 0, 0, -45],
            textStyle: {
              fontSize: 19,
              color: 'white'
            },

            /* subtext: `2100`,
          subtextStyle : {
            color: 'red'
          }, */

            // 副标题使用-富文本语法：{style_name|value}， 注意不能有空格
            subtext: `{totalSty|${total}}`,
            subtextStyle: {
              rich: {
                totalSty: {
                  fontSize: 19,
                  color: 'white',
                  width: 90,
                  align: 'center'
                }
              }
            }
          },

          legend: {
            orient: 'vertical',
            right: '10%',
            top: '18%',

            itemGap: 10,
            itemWidth: 16,
            itemHeigth: 16,
            icon: 'rect',

            // 自定义图例的名称
            formatter: function (name) {
              // 图例文本格式化 + 富文本定制样式
              const currentItem = pieDatas.find(item => item.name === name)
              return (
                '{nameSty|' +
                currentItem.name +
                '}\n' +
                '{numberSty|' +
                currentItem.value +
                '个 }' +
                '{preSty|' +
                currentItem.percentage +
                '}'
              )
            },
            textStyle: {
              rich: {
                nameSty: {
                  fontSize: 12,
                  color: '#FFFFFF',
                  padding: [10, 14]
                },
                numberSty: {
                  fontSize: 12,
                  color: '#40E6ff',
                  padding: [0, 0, 0, 14]
                },
                preSty: {
                  fontSize: 12,
                  color: '#40E6ff'
                }
              }
            }
          },

          series: [
            {
              type: 'pie',
              center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
              radius: ['30%', '75%'], // 饼图的半径。数组的第一项是内半径，第二项是外半径。
              roseType: 'area', //  area 玫瑰图, 圆心角一样，通过半径展现数据大小( 默认为 false )
              label: {
                show: true
              },
              // data: [  { name: '',  value: '',  itemStyle }  ],
              data: data
            }
          ]
        }

        myChart.setOption(option)
      }
    </script>
  </body>
</html>
